<template>
  <div class="BOX">
    <div class="liebiao">
      <ul class="left">
        <li @click="goTOLogin">
          登入
        </li>
        <li @click="Quit">
          退出
        </li>
        <li>
          教职工
        </li>
        <li>
          校友
        </li>
      </ul>

      <ul class="right">
        <li>
          数字校园
        </li>
        <li>
          领导信箱
        </li>
        <li>
          信息公开
        </li>
        <li>
          English
        </li>
        <li>
          <Search style="width: 1em; height: 1em; margin-right: 8px" />
        </li>
      </ul>
    </div>

    <div class="img">
      <img class="bgimg" src="src/assets/logobg.png">
      <img class="imglog1" src="src/assets/logo.png">
      <img class="imglog2" src="src/assets/logo2.png">
    </div>
  </div>
</template>

<script>

import {useRouter} from 'vue-router'

export default {
  name: "MyHeader",

  setup(){

    const router = useRouter()

    // 定义一个去登入的处理函数
    function goTOLogin(){
      router.push({
        name: 'myLogin'
      })
    }

    // 退出登入
    function Quit(){
      localStorage.clear()
      router.push({
        name: 'myLogin'
      })
    }


    return{
      goTOLogin,
      Quit
    }
  }
}
</script>

<style scoped>


.liebiao{
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 2;
  color: white;
  height: 200px;
  width: 100%;
  box-sizing: border-box;
}

.bgimg{
  width: 100%;
  height: 200px;
  position: absolute;
  top: 0;
}

.imglog1{
  top: 8%;
  left: 10%;
  position: absolute;
  z-index: 2;
}
.imglog2{
  top: 12%;
  left: 80%;
  position: absolute;
  z-index: 2;
}

ul{
  list-style-type: none;
}

li{
  float: left;
  padding: 0 10px;
  font-size: 16px;
  font-weight: bolder;
  cursor: pointer;

}

.left{
  margin-left: 100px;
}

.right{
  margin-right: 100px;
}
</style>